import { connect } from 'dva'
import styles from './risk.scss'
import { Button, Checkbox } from 'antd-mobile'
import { Switch } from 'antd'

const CheckboxItem = Checkbox.CheckboxItem;

const RiskNotify = ({
  dispatch,
  switchClauseNotify,
}) => {
  let toNextPage = () => {
    dispatch({
      type: "modules/getModules",
      payload: {
        pathname: "",
        businessId: "1231241228-r",
        process: "riskEvaluate",
        title: "风险评测"
      }
    })
  }
  //勾选协议
  let selectClause = (e) => {
    dispatch({
      type: 'riskEvaluate/changeClause',
      payload: {
        switchClauseNotify: e.target.checked
      }
    })
  }
  return (
    <div className={styles.riskContain}>
      <div className={styles.document}>
        <div className={styles.items}>
          <div className={styles.notiTitle}>投资者风险能力重新评估结果及适当性匹配意见告知函</div>
          <div className={styles.investor}>姓名：<span>张山峰</span></div>
          <div className={styles.investor}>资金账号：<span>123456123</span></div>
          <div className={styles.investor}>尊敬的投资者：</div>
          <div className={styles.investor}>根据您填写的《投资者风险承受能力问卷》，本公司对您的风险承受能力重新进行了综合评估，现得到评估结果如下：您的风险承受能力等级为：<span>C4(进取型)</span></div>
          <div className={styles.investor}>据本公司投资者准入要求以及适当性匹配规则，本公司对您已开通的业务权限重新进行了适当性匹配，请您仔细阅读下述适当性匹配意见。如您希望继续参与相关业务（您不得继续参与的业务除外），请选择“继续参与本业务”；如您不希望继续参与相关业务，请选择“关闭本业务”（注明“请至营业网点临柜办理”的，应及时至相关营业网点临柜办理，下同）;对您不得参与的业务，请您关闭相关业务权限。相关业务权限关闭后，您可以继续持有已持仓投资品种或进行卖出、平仓等操作，但不能进行买入、开仓等操作。</div>
          <div className={styles.dealTip}>以下适当性评估意见供您决策参考，并不代表本公司对相关业务的收益或风险作出实质性判断和保证，建议您审慎考察相关业务的特征及风险，进行充分风险评估，自行做出投资决定，独立承担投资风险：</div>
        </div>
        <div className={styles.items}>
          <div className={`${styles.titleBg} ${styles.titleBg1}`}>您适合继续参与的业务</div>
          <div className={styles.workTitle}>以下业务的风险等级与您的风险承受能力等级匹配</div>
          <div className={styles.workItem}>
            <div className={styles.title}>证券交易委托代理服务 (风险等级: R3 (中风险))</div>
            <div className={styles.switch}>
              <Switch/> 
              <span>如需关闭本业务，请至营业网点临柜办理。</span>
            </div>
          </div>
          <div className={styles.workItem}>
            <div className={styles.title}>创业板市场(风险等级: R3 (中风险)）</div>
            <div className={styles.switch}>
              <Switch/>
              <span>如需关闭本业务，请至营业网点临柜办理。</span>
            </div>
          </div>
          <div className={`${styles.titleBg} ${styles.titleBg2}`}>您不适合继续参与的业务</div>
          <div className={styles.workTitle}>以下业务的风险等级高于您的风险承受能力等级，或者所属投资品种、风险等级与您在风险评估中确认的投资品种、风险承受能力等级不完全匹配（适用于融资融券），继续参与该业务可能导致您产生损失</div>
          <div className={styles.workItem}>
            <div className={styles.title}>退市整理股票 (风险等级: R4 (中高风险)）</div>
            <div className={styles.switch}>
              <Switch defaultChecked/> 
              <span>关闭本业务</span>
            </div>
          </div>
          <div className={styles.workItem}>
            <div className={styles.title}>风险警示股票 (风险等级: R4 (中高风险)）</div>
            <div className={styles.switch}>
              <Switch/>
              <span>继续参与本业务</span>
            </div>
          </div>
          <div className={`${styles.titleBg} ${styles.titleBg3}`}>您不得参与的业务</div>
          <div className={styles.workTitle}>您的风险承受能力等级不符合本公司规定的准入要求</div>
          <div className={styles.workItem}>
            <div className={styles.title}>退市整理股票 (风险等级: R4 (中高风险)）</div>
            <div className={styles.switch}>
              <Switch defaultChecked/> 
              <span>关闭本业务</span>
            </div>
          </div>
          <div className={styles.workItem}>
            <div className={styles.title}>创业板市场(风险等级: R3 (中风险)）</div>
            <div className={styles.switch}>
              <Switch/>
              <span>继续参与本业务</span>
            </div>
          </div>
        </div>
        <div className={styles.items}>
          <div className={styles.confirmLgTitle}>投资者确认书</div>
          <div className={styles.confirmContent}>本人/本机构已认真阅读上述适当性匹配意见，充分了解相关业务的特征和风险，充分知悉上述适当性匹配意见，并作出相关投资决策，愿意承担继续参与或关闭相关业务买入权限可能引起的损失和其他后果。以上决定系本人/本机构独立、自主、真实的意思表示，与贵公司及相关从业人员无关。</div>
          <div className={`${styles.confirmUser} ${styles.confirmContent}`}>
            <div className={styles.name}>投资者确认书：<span>张山峰</span></div>
            <div className={styles.name}>日期<span>2018/10/12</span></div>
          </div>
        </div>
        <div className={styles.checkClause}>
          <CheckboxItem onChange={selectClause} defaultChecked={switchClauseNotify}>我已阅读并知悉上述内容</CheckboxItem>
        </div>
      </div>
      <div className={styles.footer}>
        <div className={styles.myButton}>
          <Button type="primary" disabled={!switchClauseNotify} onClick={toNextPage}>我已阅读并同意</Button>
        </div>
      </div>
    </div>
  )
}

export default connect((state) => state.riskEvaluate )(RiskNotify)

